<template>
  <ContainerGroup>
    <Container>
      <div id="dictionaryManagement">
        <panel-header>
          <div class="top-box">
            <el-form style="overflow: hidden" :inline="true">
              <div style="float: left">
                <el-form-item label="属性名称:">
                  <el-input
                    v-model="attriName"
                    placeholder="请输入"
                    size="small"
                  />
                </el-form-item>
                <el-form-item label="状态:">
                  <el-select
                    v-model="accountState"
                    placeholder="请选择"
                    size="small"
                  >
                    <el-option
                      v-for="(item, index) in accountList"
                      :key="index"
                      size="small"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </div>
              <div style="float: right">
                <el-button
                  type="primary"
                  size="small"
                  @click="search1()"
                >查询</el-button>
                <span><el-button
                  type=""
                  size="small"
                  style="margin-left: 20px"
                  @click="reset()"
                >重置</el-button></span>
              </div>
            </el-form>
          </div>
        </panel-header>
        <panel-body>
          <div class="content" style="height: calc(100% - 66px)">
            <div class="input-item">
              <el-button
                type="primary"
                class="el-icon-plus"
                size="small"
                @click="add"
              >新建</el-button>
              <span style="display: inline-block; margin-left: 0px">
                <div id="nevbox">
                  <el-select
                    v-model="excelBtns"
                    size="min"
                    placeholder="停用/启用"
                    @change="excelFile()"
                  >
                    <el-option
                      v-for="item in excelBtnList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </div>
                <div id="nevbox">
                  <el-select
                    v-model="delloe"
                    size="min"
                    placeholder="删除"
                    @change="delloeFile()"
                  >
                    <el-option
                      v-for="item in delloeList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </div>
                <!-- <span> -->
                <!-- <el-dropdown
                size="small"
                placement="bottom"
                trigger="click"
                @command="handleCommand"
                style="margin-left: 10px"
              >
                <el-button class="search-btn" size="small">
                  停用/启用
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="turnoff">停用</el-dropdown-item>
                  <el-dropdown-item command="turnon">启用</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown> -->
                <!-- </span> -->
                <!-- <span>
              <el-dropdown
                size="small"
                placement="bottom"
                trigger="click"
                @command="handleCommand2"
                style="margin-left: 10px"
              >
                <el-button class="search-btn" size="small">
                  删除
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="delPart"
                    >批量删除</el-dropdown-item
                  >

                </el-dropdown-menu>
              </el-dropdown>
            </span> -->
              </span>
            </div>

            <el-table
              style="width: 100%; margin-top: 10px"
              height="calc(100% - 50px)"
              :highlight-current-row="true"
              current-row-key="id"
              border
              :data="tableData"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55" />
              <el-table-column prop="name" label="属性名称" />
              <el-table-column label="启用/禁用">
                <template slot-scope="scope">
                  <el-switch
                    v-model="scope.row.enable"
                    active-color="#4285FF"
                    inactive-color="#E5E5E5"
                    active-value="0"
                    inactive-value="1"
                    @click.stop.native
                    @change="active_text(scope.row)"
                  />
                </template>
              </el-table-column>
              <el-table-column prop="createTime" label="创建时间" />
              <el-table-column prop label="操作">
                <template slot-scope="scope">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="编辑"
                    placement="top"
                  >
                    <el-button
                      style="color: #ff8e2f"
                      class="el-icon-edit-outline"
                      size="mini"
                      type="text"
                      @click.stop="edit(scope.row)"
                    />
                  </el-tooltip>
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="删除"
                    placement="top"
                  >
                    <el-button
                      style="color: #ff8e2f"
                      class="el-icon-delete"
                      size="mini"
                      type="text"
                      @click.stop="del(scope.row)"
                    />
                  </el-tooltip>
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="数据项列表"
                    placement="top"
                  >
                    <el-button
                      style="color: #ff8e2f"
                      class="el-icon-tickets"
                      size="mini"
                      type="text"
                      @click.stop="etoplay(scope.row)"
                    />
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="total > 0"
              :total="total"
              :page.sync="pageInfo.pageNum"
              :limit.sync="pageInfo.pageSize"
              @pagination="pagationChange"
            />
            <!-- <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="pageInfo.pageNum"
          :limit.sync="pageInfo.pageSize"
          :pageSize="pageInfo.pageSize"
          @pagination="this.getData()"
        ></pagination> -->
            <!-- 新增弹出框 -->
            <el-dialog
              :title="titleText"
              :close-on-click-modal="false"
              :visible.sync="dialogVisible"
              width="30%"
              :before-close="handleClose"
            >
              <el-form
                ref="ruleForm"
                :model="ruleForm"
                :rules="rules"
                label-width="100px"
                style="min-width: 260px; padding: 20px 40px 0 0"
                class="demo-ruleForm"
              >
                <el-form-item label="属性名称:" prop="pyhName">
                  <el-input v-model.trim="ruleForm.pyhName" />
                </el-form-item>
                <el-form-item label="排序" prop="netlook">
                  <el-input v-model.trim="ruleForm.netlook" />
                </el-form-item>
                <el-form-item label="状态:" prop="delivery">
                  <el-switch v-model="ruleForm.delivery" />
                </el-form-item>

                <el-form-item>
                  <el-button
                    v-if="titleText === '新增属性'"
                    type="primary"
                    @click="submitForm('ruleForm', '0')"
                  >确定</el-button>
                  <el-button
                    v-if="titleText === '编辑属性'"
                    type="primary"
                    @click="submitForm('ruleForm', '1')"
                  >确定</el-button>
                  <el-button @click="closebtn">取消</el-button>
                </el-form-item>
              </el-form>
            </el-dialog>
          </div>
        </panel-body>
      </div>
    </Container>
  </ContainerGroup>
</template>

<script>
import {
  addBaseDictVo,
  getAllBaseDict,
  updateBaseDictVo,
  getBaseDict,
  deleteBaseDictVoByIds,
  updateBaseDictBatch
} from '../../utils/apis/registrationApi'
export default {
  name: 'DictionaryManagement',
  data() {
    return {
      attriName: '',
      accountState: '',
      // pageNum: 1,
      //  pageSize: 10,
      titleText: '',
      pageInfo: {
        pageSize: 10,
        pageNum: 1
      },

      total: 0,
      dialogVisible: false,
      iditId: '',
      excelBtns: '',
      excelBtnList: [
        {
          label: '停用',
          value: '1'
        },
        {
          label: '启用',
          value: '2'
        }
      ],
      delloe: '',
      delloeList: [
        {
          label: '批量删除',
          value: '1'
        }
      ],
      accountList: [
        { label: '禁用', value: '1' },
        { label: '启用', value: '0' }
      ],
      tableData: [],
      nevbox: [],
      ruleForm: {
        pyhName: '',
        netlook: '',
        delivery: false // 0  开启 1关闭
      },
      rules: {
        pyhName: [
          { required: true, message: '请输入属性名称', trigger: 'blur' }
        ],
        netlook: [{ required: true, message: '请输入排序', trigger: 'blur' }]
      }
    }
  },
  created() {
    // if (this.$route.query.pageNum) {
    //   this.pageInfo.pageNum = Number(this.$route.query.pageNum)
    // }
    // this.getData()
  },
  methods: {
    pagationChange(paylod) {
      if (this.$route.query.pageNum) {
        this.$route.query.pageNum = paylod.page
      }
      this.pageInfo.pageNum = paylod.page
      this.pageInfo.pageSize = paylod.pageSize
      this.search()
    },

    search1() {
      this.pageInfo.pageNum = 1
      this.search()
    },
    // 新增
    add() {
      this.dialogVisible = true
      this.titleText = '新增属性'
      this.ruleForm.pyhName = ''
      this.ruleForm.netlook = ''
      this.ruleForm.delivery = false
    },
    // 提交确认
    submitForm(formName, index) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (index === '0') {
            const parms = {
              orderId: this.ruleForm.netlook,
              name: this.ruleForm.pyhName,
              enable: this.ruleForm.delivery === false ? '1' : '0',
              parentId: ''
            }
            addBaseDictVo(parms).then((res) => {
              if (res.data.code === 200) {
                this.$message({
                  message: '新增成功',
                  type: 'success'
                })
                this.dialogVisible = false
                this.getData()
              } else {
                this.$message.error(res.data.message)
              }
            })
          }
          if (index === '1') {
            const parms = {
              orderId: this.ruleForm.netlook,
              name: this.ruleForm.pyhName,
              id: this.iditId,
              enable: this.ruleForm.delivery === false ? '1' : '0',
              parentId: '0'
            }
            updateBaseDictVo(parms).then((res) => {
              if (res.data.code === 200) {
                this.$message({
                  message: '编辑成功',
                  type: 'success'
                })
                this.dialogVisible = false
                this.getData()
              } else {
                this.$message.error(res.data.message)
              }
            })
          }
        } else {
          return false
        }
      })
    },
    // handleClose 关闭
    handleClose() {
      this.dialogVisible = false
    },
    // 取消按钮
    closebtn() {
      this.dialogVisible = false
    },
    // 更换状态
    active_text(row) {
      this.$confirm('此操作将改变当前数据状态, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          const parms = {
            id: row.id,
            enable: row.enable
          }
          updateBaseDictVo(parms).then((res) => {
            if (res.data.code === 200 && res.status === 200) {
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.getData()
            } else {
              this.$message.error(res.data.message)
            }
          })
        })
        .catch(() => {
          row.enable = row.enable === '1' ? '0' : '1'
        })
    },
    // 获取
    getData(data) {
      if (data) {
        this.pageInfo.pageSize = data.pageSize
        this.pageInfo.pageNum = data.page
      }

      const parms = {
        pageNum: this.pageInfo.pageNum,
        pageSize: this.pageInfo.pageSize,
        status: this.accountState
      }
      getAllBaseDict(parms).then((res) => {
        if (res.data.code === 200) {
          this.total = res.data.data.total
          this.tableData = res.data.data.list
        }
      })
    },
    // 搜索
    search() {
      const parms = {
        pageNum: this.pageInfo.pageNum,
        pageSize: this.pageInfo.pageSize,
        status: this.accountState,
        name: this.attriName
      }
      getAllBaseDict(parms).then((res) => {
        if (res.data.code === 200) {
          this.total = res.data.data.total
          this.tableData = res.data.data.list
        }
      })
    },
    reset() {
      this.attriName = ''
      this.accountState = ''
    },
    // 编辑属性
    edit(row) {
      this.iditId = row.id
      this.dialogVisible = true
      this.titleText = '编辑属性'
      getBaseDict({ id: row.id }).then((res) => {
        if (res.data.code === 200) {
          this.ruleForm.pyhName = res.data.data.name
          this.ruleForm.netlook = res.data.data.orderId
          this.ruleForm.delivery = res.data.data.enable === '0' // 0  开启 1关闭
        }
      })
    },
    // 删除属性
    del(row) {
      this.$confirm('是否删除该属性?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(() => {
          const ides = []
          ides.push(row.id)
          deleteBaseDictVoByIds(ides).then((res) => {
            if (res.data.code === 200) {
              this.$message({
                message: '删除成功',
                type: 'success'
              })
              this.getData()
            } else {
              this.$message.error(res.data.message)
            }
          })
        })
        .catch(() => {
          return false
        })
    },
    viewDetail(row) {
      this.$router.push({
        path: '/dictionaryManagement/dictMerGerment',
        query: { id: row.id }
      })
    },
    // 数据项列表
    etoplay(row) {
      if (this.$route.query.pageNum) {
        this.pageInfo.pageNum = this.$route.query.pageNum
      }

      this.$router.push({
        path: '/dictionaryManagement/dictMerGerment',
        query: { id: row.id, pageNum: this.pageInfo.pageNum }
      })
    },
    viewItem(row) {},
    // 批量修改状态
    excelFile() {
      if (this.nevbox.length > 0) {
        // 停用
        if (this.excelBtns === '1') {
          const list = []
          this.nevbox.forEach((item) => {
            list.push(item.id)
          })
          const parms = {
            status: 1
          }
          updateBaseDictBatch(list, parms).then((res) => {
            if (res.data.code === 200) {
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.getData()
            } else {
              this.$message.error(res.data.message)
            }
          })
        } else if (this.excelBtns === '2') {
          // 启用
          const list = []
          this.nevbox.forEach((item) => {
            list.push(item.id)
          })
          const parms = {
            status: 0
          }
          updateBaseDictBatch(list, parms).then((res) => {
            if (res.data.code === 200) {
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.getData()
            } else {
              this.$message.error(res.data.message)
            }
          })
        }
      } else {
        this.$message.error('未选择数据')
        this.excelBtns = ''
      }
    },

    // 删除属性树
    delloeFile() {
      if (this.nevbox.length > 0) {
        if (this.delloe === '1') {
          const list = []
          this.nevbox.forEach((item) => {
            list.push(item.id)
          })
          deleteBaseDictVoByIds(list).then((res) => {
            if (res.data.code === 200) {
              this.$message({
                message: '删除成功',
                type: 'success'
              })
              this.getData()
            } else {
              this.$message.error(res.data.message)
            }
          })
        }
      } else {
        this.$message.error('未选择数据')
      }
    },

    handleSelectionChange(val) {
      this.nevbox = val
    }
  }
}
</script>

<style lang="less" scoped>
#dictionaryManagement {
  height: 100%;
}
.search-btn {
  border-color: #4285ff;
  color: #4285ff;
}
.input-item {
  display: inline-block;
}
.top-box {
  background-color: #fff;
  width: 100%;
  border-radius: 5px;
}
.content {
  background-color: #fff;

  border-radius: 5px;
}
</style>
<style lang="less" >
.el-dialog__header {
  background: #2d57ad;
  .el-dialog__title {
    color: #fff;
  }
  .el-dialog__headerbtn {
    .el-icon-close {
      color: #fff;
    }
  }
}
</style>
<style lang="less">
#nevbox {
  display: inline-block;
  .el-select {
    width: 102px;
    margin-left: 20px;
  }
  .el-input--suffix .el-input__inner {
    padding-right: 0px;
    padding-left: 12px;
    height: 36px;
    color: #4285ff;
    border-color: #4285ff;
  }
  .el-select .el-input .el-select__caret {
    color: #4285ff;
    line-height: 36px;
  }
  .el-input__inner::placeholder {
    color: #4285ff;
  }
  /* 谷歌 */
  .el-input__inner::-webkit-input-placeholder {
    color: #4285ff;
  }
  /* 火狐 */
  .el-input__inner:-moz-placeholder {
    color: #4285ff;
  }
  /*ie*/
  .el-input__inner:-ms-input-placeholder {
    color: #4285ff;
  }
}
</style>
